<script setup lang="ts">
import JCrud from "./components/crud";
import JTable from "./components/table";
import {App, ConfigProvider, TabPane, Tabs} from "ant-design-vue";
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import crudDemo from "./demo/crud.ts";
import formDemo from "./demo/form.ts";
import {useGet} from "./utils/request.ts";
import {onMounted, ref} from "vue";
import JForm from "./components/form";
import JPage from "./components/page";

function onSearch(form: any) {
  useGet('/users', {
    keyword: form.username
  })
      .then(res => {
        dataSource.value = res.data.content
      })
}

const dataSource = ref([])
onMounted(() => {
  useGet('/users')
      .then(res => {
        dataSource.value = res.data.content
      })
})
const activeKey = ref('1');
</script>

<template>
  <App>
    <ConfigProvider :locale="zhCN">
      <Tabs v-model:activeKey="activeKey">
        <TabPane key="1" tab="JCrud">
          <JPage>
            <JCrud
                :name="'用户'"
                :table="{columns:crudDemo.columns.value,dataSource:dataSource}"
                @query="onSearch"></JCrud>
          </JPage>
        </TabPane>
        <TabPane key="2" tab="JTable">
          <JPage>
            <JTable :columns="crudDemo.columns.value" :dataSource="dataSource"
                    :pagination="{pageSize:2,pageSizeOptions:[2,5]}"></JTable>
          </JPage>
        </TabPane>
        <TabPane key="3" tab="JForm">
          <JPage>
            <JForm :items="formDemo.columns.value"></JForm>
          </JPage>
        </TabPane>
      </Tabs>
    </ConfigProvider>
  </App>
</template>

<style scoped>
/*.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}*/
</style>
